How to add a cart widget to your menu This tutorial shows you how to add a submenu to your Cart Summary / Info item which displays a mini cart. Please note that the styling of your WooCommerce cart widget will be dictated by WooCommerce and your theme (if your theme provides cart widget styles. UberMenu does not apply its own styling to the cart widget 1. Add a Widget Area item as a child of your Cart Summary item In Appearance > Menus, add a new Widget Area item from the UberMenu Advanced Items group. Drag it into position as a child below your top level cart summary item. 2. Set up the Widget Area In your new Widget Area item, open the UberMenu settings and enter the name for your widget area in the Custom Widget Area setting. We’ll use Cart Click Save Menu Item to save the UberMenu item settings. Click Save Menu to save the new menu item to the menu – or you can do this later after you’ve set up the Widget in Step 3. 3. Add the widget Navigate to Appearance > Widgets in your WordPress admin. Find the Cart Widget Drag it into the [UberMenu] Cart widget area You can remove the title to just show the cart with no header above it if you like. Click Save to save the widget. 4. Set the submenu position and width, disable the submenu indicator (optional) Back in Appearance > Menus, Open the UberMenu menu item settings for the top level (Cart summary) item In the General tab, enable the Disable Submenu Indicator setting. In the Submenu tab, set the Mega Submenu Position to Right Edge of Parent Item or as desired. In the Submenu tab, set the Submenu Width to 450px or as […]

By default, your normal items within a mega submenu will be visible when the submenu is opened. By leaving the Submenu Type set to “Auto”, these column items become stacks. If you switch the Submenu Type to Mega or Flyout, you will get a dropdown instead, and this article deals with that situation. Flyouts within Mega Submenus are not recommended I do not generally recommend using dropdowns within mega submenus. This is generally confusing for users and leads to bad UX, so you should consider whether this is really the best format for your submenu. Generally, better formats would include using Tabs or else Flyout submenus as your first level and mega submenus as your second level. These formats achieve similar effects (hidden content revealed on activation within a submenu) in a more structured format. Enabling Dropdowns within Mega Submenus If you wish to allow dropdowns within a mega submenu, you can enable that in the Control Panel > Main UberMenu Configuration > Submenus > Allow Dropdown within Mega Submenu Please note: if you enable this setting, you cannot use the “Slide” submenu transition. This is because the slide transition requires hidden overflow to work, while dropdowns within mega submenus requires visible overflow to work. If you want to use this setting, you must switch to a Transition other than Slide Multi-level mega submenus (intended use case) One good use (really the intended one) for this is to allow a single-line submenu to have additional mega submenus so that you can have a double-level mega menu. This is a very specific scenario, however. Here’s the result when using the setting as intended:

Since UberMenu 3.7 Dropdown submenus By default, submenus on mobile will drop down, meaning that when they are open they will overlap other content in the menu/site. This is generally preferable for inline menus, which displace other content on the site when they open. Using dropdowns limits the scrolling required to navigate the menu. Accordion submenus Accordion submenus are a new option in v3.7 to complement the Modal Mobile menu. Accordion submenus push down items below them rather than overlapping. This option is optimized for the Modal mobile menu option, which appears in its own modal window and scroll context. Note that if you use a 2-column layout for tablets, accordion mode will be disabled as this is incompatible.

This video tutorial walks you through recreating the UberMenu 3 Menu Bar, including all top level items, social media icons, and the search bar drop down. Click through to the video on YouTube to be able to jump to specific sections of the video via the timestamp links in the Description.

This feature is experimental. Its implementation may change in the future An Image Portal allows you to display an item’s image, on hover, in a separate area of the menu. The Portal is the area which displays the images separately from the source items. Note that in the Portal setup, the images will not be clickable, as they will disappear when hovering off of the associated menu items. Setup Instructions Overview We’ll set up a group of menu items with images assigned. Then we’ll add a custom content item elsewhere in the layout, containing the [ubermenu_image_portal] shortcode, which will select those menu items and display their images when hovered. 1. Create a list of menu items First, create your list of items. These items will trigger an associated image to appear in the Portal when you hover over them. You can put them in whatever layout you like (multiple columns, rows, etc), however, none of the items should have dropdown submenus, as the dropdown trigger mouse interaction would conflict with the image hover mouse interaction. 2. Apply an image to each item You can set an Image for each item, either manually or by inheriting the featured image from that post. Make sure you set the Item Layout for the items to “Image Above”, either on the item itself or in the Control Panel (global settings). These images will be collected and removed from the source menu items and displayed in the Portal instead. (For now, you’ll see them with the items, but that’ll change once we add the shortcode in step 4). 3. Give your item source container a selector When we create the actual Portal, we’ll give it a standard CSS/JS selector to indicate which items’ images should be displayed in the portal. You can set this up […]

Twenty Nineteen interferes with UberMenu in two ways: 1. Injecting markup through PHP filters, which is resolved through a snippet of code provided below. 2. Residual styling, which is resolved through manual integration and a line of CSS. Are you using a child theme? You should always use a child theme to modify your theme and never edit the parent theme itself. If you’re not already using a child theme, create one first and activate it. If you’re not sure how to create a child theme, you can use the Child Theme Configurator plugin to automate the task. Don’t forget to activate your child theme. It doesn’t do anything unless it’s the active theme. Removing extra Twenty Nineteen markup The most obvious issue when integrating UberMenu with Twenty Nineteen is the extra markup that the theme injects, so we’ll tackle that first. All of these extra arrows (among other markup) are added by Twenty Nineteen. While these are important for Twenty Nineteen’s menu, the theme adds this extra markup to *all* menus, rather than just its own. To prevent Twenty Nineteen from adding this extra markup to UberMenu, add this PHP code in your child theme’s functions.php Eliminating Residual Styling Next we want to prevent the theme’s styles from interfering with the menu. To do this we’ll use manual integration. First, copy the twentynineteen/template-parts/header/site-branding.php into your child theme in the same directory (you’ll need to create those directories if they don’t already exist). e.g. twentynineteenchild/template-parts/header/site-branding.php Next, open the child theme’s site-branding.php file and find the #site-navigation section: Replace this block of code: with this: That manually integrates the menu. Finally, there is still some CSS from the theme that gives the text in the menu a shadow – it applies to all text within the header. To disable this, add […]